<template>
       <div
      class="
        venue-display
        flex flex-direction
        strut-absolute
        padding-top-xl padding-lr-xl padding-bottom-xs
      "
      style="overflow-y: scroll; overflow-x: hidden; height: 100%"
    >
    <el-form>
        <el-form-item>
            <el-button type="primary" @click="openCreateTeamDialog">
                发布公告
            </el-button>
        </el-form-item>
    </el-form>
    <el-table border :data="data">
        <el-table-column label="公告编号" prop="noticeId" align="center"></el-table-column>
        <el-table-column label="公告标题" prop="title" align="center"></el-table-column>
        <el-table-column label="公告内容" prop="notice" align="center"></el-table-column>
        <el-table-column label="发布时间" prop="updateDate" align="center"></el-table-column>
        <el-table-column label="更新时间" prop="insertDate" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" @click="openEditDialog(scope.row)">
                    编辑
                </el-button>
                <el-button icon="el-icon-delete" @click="deleteTeamNotice(scope.row.noticeId)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog style="margin-left: 30%;width: 50%;"
    :visible.sync="createTeamNoticeVisible"
    >
    <el-form label-width="80px"
    v-model="createParam">
    <el-form-item label="公告标题">
    <el-input v-model="createParam.title">

    </el-input>
    </el-form-item>
    <el-form-item label="公告内容">
    <el-input type="textarea" class="el_inner_textarea1"
    v-model="createParam.notice">
    </el-input>
    </el-form-item>
    <el-button style="margin-left: 3%;width: 30%;" @click="cancelDialog">
        取消
    </el-button>
    <el-button style="width: 30%;margin-left: 35%;" @click="createTeamNotice"
    type="primary">
        确认
    </el-button>
    </el-form>
    
    </el-dialog>

    <el-dialog style="margin-left: 30%;width: 50%;"
    :visible.sync="editTeamNoticeVisible">
    <el-form label-width="80px" 
    v-model="editParam">
        <el-form-item label="公告标题">
            <el-input v-model="editParam.title">

            </el-input>
        </el-form-item>
        <el-form-item label="公告内容">
            <el-input type="textarea" class="el_inner_textarea1"
            v-model="editParam.notice">

            </el-input>
        </el-form-item>
        <el-button style="margin-left: 3%;width: 30%;" @click="cancelDialog">
            取消
        </el-button>
        <el-button style="width: 30%;margin-left: 35%;" @click="editTeamNotice"
        type="primary">
            确认
        </el-button>
    </el-form>
    </el-dialog>
    </div>
</template>
<script>
import {getTeamNoticeList,editTeamNotice,removeTeamNotice,addTeamNotice} from '@/api/eventSection'
export default ({
    data(){
        return{
            teamId:'',
            data:[],
            editParam:{
                noticeId:'',
                title:'',
                notice:''
            },
            createParam:{
                teamId:'',
                title:'',
                notice:''
            },
            editTeamNoticeVisible:false,
            createTeamNoticeVisible:false
        }
    },
    mounted() {
        this.teamId = this.$route.query.teamId
        this.createParam.teamId = this.teamId
        this.getTeamNoticeList()
  },
  methods:{
    openCreateTeamDialog(){
        this.createTeamNoticeVisible = true
    },
    createTeamNotice(){
        addTeamNotice(this.createParam).then(res => {
            if(res.data.code === 200){
                this.$message({
                message:res.data.msg,
                type:'success'
                })
                this.createTeamNoticeVisible = false
                this.getTeamNoticeList()
            }else{
                this.$message({
                message:res.data.msg,
                type:'error'
                }) 
            }
        })
    },
    deleteTeamNotice(noticeId){
        removeTeamNotice({noticeId:noticeId}).then(res => {
            if(res.data.code === 200){
                this.$message({
                    message:res.data.msg,
                    type:'success'
                })
                this.getTeamNoticeList()
            }else{
                this.$message({
                    message:res.data.msg,
                    type:'error'
                })
            }
        })
    },
    cancelDialog(){
        this.editTeamNoticeVisible  = false
        this.createTeamNoticeVisible = false
        this.getTeamNoticeList()
    },
    openEditDialog(param){
        this.editParam = {...param}
        this.editTeamNoticeVisible = true
    },
    editTeamNotice(){
        const param = {
            noticeId:this.editParam.noticeId,
            title:this.editParam.title,
            notice:this.editParam.notice
        }
        editTeamNotice(param).then(res => {
            if(res.data.code === 200){
                this.$message({
                    message:res.data.msg,
                    type:'success'
                })
                this.editTeamNoticeVisible = false
                this.getTeamNoticeList()
            }else{
                this.$message({
                    message:res.data.msg,
                    type:'error'
                })
            }
        })
    },
    getTeamNoticeList(){
        getTeamNoticeList({teamId:this.teamId}).then(res => {
            if(res.data.code === 200){
                this.data = res.data.data
            }
        })
    }
  }
})
</script>

<style scoped>
.el_inner_textarea1 >>> .el-textarea__inner{
  height:200px
}
</style>
